<template>
	<view class="page">
		<u-navbar title="手机号" autoBack fixed placeholder titleStyle="color: #232832" bgColor="#FFFFFF"
			leftIconColor="#232832"></u-navbar>
		<c-content :top="statusBarHeight + 44" bgColor="#F4F4F7">
			<view class="title">
				绑定手机号
			</view>
			<view class="subtitle">验证通过后可以换绑</view>
			<view class="form">
				<view class="form-item">
					<u-input v-model="phone" placeholder="手机号" maxlength="11" border="none" color="#232832" prefixIcon="+86"
						clearable
						prefixIconStyle="font-size: 15px;padding-right: 5px;line-height: 26px;height: 24px;top: 1px;"></u-input>
				</view>
				<view class="form-item">
					<u-input v-model="code" placeholder="验证码" maxlength="11" border="none" color="#232832" type="number">
						<template #suffix>
							<u-code ref="code" unique-key="phone" keepRunning :seconds="120" @change="changeCode"></u-code>
							<text class="code" @click="sendCode()">{{ codeLabel }}</text>
						</template>
					</u-input>
				</view>
			</view>
			<view class="btn">
				<view class="btn-label">提交</view>
			</view>
		</c-content>
	</view>
</template>

<script>
	import mixins from '@/mixins/index.js'
	export default {
		mixins: [mixins],
		data() {
			return {
				phone: '',
				code: '',
				codeLabel: '获取验证码',
			}
		},
		methods: {
			changeCode(t) {
				this.codeLabel = t
			},
			sendCode() {
				const phone = uni.validator.phone(this.phone)
				if (phone != 0) {
					uni.toast.show(phone)
					return
				}
				this.$refs.code.start()
				uni.toast.show('发送成功')
			}
		}
	}
</script>

<style scoped lang="scss">
	@include settingStyle;
</style>